// 通用样式（原子性样式）
// 消除浮动影响
.clearfix {
	&::before {
		display: table;
		content: '';
	}

	&::after {
		display: table;
		clear: both;
		content: '';
	}
}

// 文本内容超出当前容器出...
.textellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

// 进度条样式
.loading-bar {
	height: 1px;
	width: 100%;
	position: fixed;
	z-index: 1;
}
.hover-active {
	&:hover {
		color: mix(mix(#fff, @text-color, 5%), #fff, 80%);
		background-color: mix(mix(@primary-color, #fff, 20%), #fff, 50%);
	}

	&.is-active {
		color: mix(#fff, @text-color, 5%);
		background-color: mix(@primary-color, #fff, 20%);
	}
}

.editor-border-active {
	border-color: @primary-color;
	box-shadow: 0 0 0 2px mix(white, @primary-color, 85%);
}
//  按钮（行为级别 = 不常用）
.action-level-50 {
	color: @primary-color;
	background-color: @app_yellow;
	border-color: @app_yellow;

	&:hover {
		background-color: fade(@app_yellow, 80%);
		border-color: fade(@app_yellow, 80%);
	}

	&:disabled,
	&:disabled:hover {
		color: fade(@primary-color, 40%);
	}
}

//  按钮（默认，行为级别 = 一般操作）
.action-level-100 {
	color: @primary-color;
	background-color: @app_white;
	border-color: @primary-color;

	&:hover,
	&:focus {
		color: #000;
		background-color: @app_white;
		border-color: #000;
	}

	&:disabled,
	&:disabled:hover {
		color: fade(@primary-color, 40%);
		background: fade(@app_white, 40%);
		border-color: fade(@primary-color, 40%);
	}
}
//  按钮（行为级别 = 常用操作）
.action-level-200 {
	background: mix(@primary-color, #fff, 20%);
	color: @primary-color;
	border-color: mix(@primary-color, #fff, 40%);

	&:hover {
		background: @primary-color;
		color: #fff;
		border-color: @primary-color;
	}

	&:disabled,
	&:disabled:hover {
		background: mix(mix(@primary-color, #fff, 20%), #fff, 80%);
		color: mix(@primary-color, #fff, 50%);
		border-color: mix(mix(@primary-color, #fff, 20%), #fff, 80%);
	}
}

//  按钮（行为级别 = 关键操作）
.action-level-250 {
	color: @app_white;
	background-color: @primary-color;
    border-color: @primary-color;
	&:hover,
	&:focus {
		color: @app_white;
		background-color: lighten(@primary-color, 15%);
		border-color: fade(@primary-color, 80%);
	}

	&:disabled,
	&:disabled:hover {
		color: @app_white;
		background-color: lighten(@primary-color, 15%);
		border-color: fade(@primary-color, 80%);
	}
}
